<template>
  <ZTable
    :data-source="dataSource"
    :columns="columns"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operate'">
        <z-button type="link" style="margin-right: 16px">
          编辑
        </z-button>
        <z-button type="link">
          删除
        </z-button>
      </template>
    </template>
  </ZTable>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const dataSource = ref([
      {
        key: '1',
        name: 'John Brown',
        money: '￥300,000.00',
        address: 'New York No. 1 Lake Park'
      },
      {
        key: '2',
        name: 'Jim Green',
        money: '￥1,256,000.00',
        address: 'London No. 1 Lake Park'
      },
      {
        key: '3',
        name: 'Joe Black',
        money: '￥120,000.00',
        address: 'Sidney No. 1 Lake Park'
      }
    ])
    const columns = ref([
      {
        title: 'Name',
        dataIndex: 'name',
        ellipsis: true
      },
      {
        title: 'Cash Assets',
        dataIndex: 'money'
      },
      {
        title: 'Address',
        dataIndex: 'address'
      },
      {
        title: '操作',
        dataIndex: 'operate'
      }
    ])
    return {
      dataSource,
      columns
    }
  }
})
</script>
    